Datepicker component enables users to enter a date either through text input or selecting a date from the Calendar dropdown.
The Datepicker component combines text input, and calendar in dropdown.
Use Datepicker to ask user's for date input in forms, modals, or filtering.
Import
import { Datepicker } from '@contentful/f36-components';
import { Datepicker } from '@contentful/f36-datepicker';
Examples
Basic
Display Datepicker component with text input
Date Formats
Datepicker supports printing out different formats to users, see https://date-fns.org/v2.16.1/docs/format
At Contentful we use dd LLL yyyy
format to communicate date to users, example 31 Jan 2021
Visual States
Visual states indicates to users certain messages through UI.
Communicate to the users in text why the Datepicker is in a specific state, example:
Disabled: "You don't have access to edit this field!"
Invalid: "Please enter a valid date!"
Wrapped in FormControl
You can use Datepicker with the FormControl in order to enhance layout with input label, help text or validation message.
Limiting the date range
Set mininum and/or maximum dates to limit users to choose from a specific period in time.
Use the fromDate
and toDate
properties to control time frames.
Multiple months
If you need to show more than a month at once, use the numberOfMonths
property.
Open by default
Use the defaultIsOpen
property to open the dropdown and display the Calendar by default without user interaction.
Note: the Calendar closes by pressing the escape key or by clicking outside of the Datepicker.
Custom
If you need a custom solution, you can build it by leveraging our lower-level components, such as Calendar, Popover, and TextInput.
For example, Datepicker that uses text input as a trigger without a button.
Props (API reference)
Accessibility
- Keyboard navigation is supported
- Necessary aria roles are provided by default
- When providing a label, ensure it's linked to the text input